﻿<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="generator" content="Jekyll v3.6.0">
<title>图片 &middot; BootstrapVue</title>
<!-- Bootstrap 核心CSS -->
<link href="../../../v4/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- 本文档额外专用css -->
<link href="../../../v4/assets/css/docsearch.min.css" rel="stylesheet">
<link href="../../../v4/assets/css/docs.min.css" rel="stylesheet">
<link href="../../style/bv_path.css" rel="stylesheet">

<!-- Favicons图标定义 -->
<link data-n-head="ssr" rel="manifest" href="../../manifest.json">
<link data-n-head="ssr" rel="shortcut icon" href="../../style/icons/icon_64.png">
<link data-n-head="ssr" rel="apple-touch-icon" href="../../style/icons/icon_512.png" sizes="512x512">

<!-- Meta关键字定义 -->
<meta name="description" content="The most popular HTML, CSS, and JS library in the world.">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">

</head>
<body>
<a id="skippy" class="sr-only sr-only-focusable" href="#content">
<div class="container"> <span class="skiplink-text">跳到主体内容</span> </div>
</a>
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar"> <a class="navbar-brand mr-0 mr-md-2" href="../" aria-label="Bootstrap">
  <svg class="d-block" width="36" height="36" viewbox="0 0 612 612" xmlns="http://www.w3.org/2000/svg" focusable="false">
    <title>Bootstrap</title>
    <path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/>
    <path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/>
  </svg>
  </a>
  <div class="navbar-nav-scroll">
    <ul class="navbar-nav bd-navbar-nav flex-row">
      <li class="nav-item"><a class="nav-link " href="../">首页</a></li>
      <li class="nav-item"><a class="nav-link" href="index.html">中文手册</a></li>
      <li class="nav-item"><a class="nav-link active" href="../components">组件</a></li>
      <li class="nav-item"><a class="nav-link " href="../directives">指令</a></li>
      <li class="nav-item"><a class="nav-link " href="../reference">参考</a></li>
      <li class="nav-item"><a class="nav-link " href="https://bootstrap-vue.org/play" target="_blank">体验</a></li>
      <li class="nav-item"><a class="nav-link " href="http://code.z01.com/v4"><i class="zi zi_bold" zico="粗"></i> Boostrap</a></li>
      <li class="nav-item"><a class="nav-link" href="http://ico.z01.com" target="_blank" rel="noopener">zico图标系统</a></li>
      <li class="nav-item"><a class="nav-link" href="http://www.z01.com" target="_blank" rel="noopener">Zoomla!逐浪CMS</a></li>
    </ul>
  </div>
  <ul class="navbar-nav flex-row ml-md-auto d-none d-md-flex">
    <li class="nav-item dropdown"> <a class="nav-item nav-link dropdown-toggle mr-md-2" href="#" id="bd-versions" data-toggle="dropdown" aria-haspopup="true" aria-expanded="alse"> v2.12.0 </a>
      <div class="dropdown-menu dropdown-menu-right" aria-labelledby="bd-versions"> 
        <a class="dropdown-item active" href="../../../bootstrap-vue/docs/4.0/">Latest (4.3.x)</a>
        <a class="dropdown-item" href="/Boot/">v3.3.7</a>
        <a class="dropdown-item" href="/Sass/">Sass语言</a>
        <a class="dropdown-item" href="/Emmet/">Emmet语法</a>
        <a class="dropdown-item" href="//www.z01.com/tool/" target="_blank">IIS站长工具</a>
        <a class="dropdown-item" href="//ad.z01.com/" target="_blank">广告源码</a>
        <a class="dropdown-item" href="//v.z01.com/mb/" target="_blank">免费模板</a>
        <a class="dropdown-item" href="//v.z01.com/" target="_blank">H5移动创作</a>
        <a class="dropdown-item" href="//www.z01.com/help/web/3234.shtml" target="_blank">Flexbox布局</a>
		<a class="dropdown-item" href="/boot/font.html" target="_blank">Font Awesome</a>
</div>
    </li>
    <li class="nav-item"> <a class="nav-link p-2" href="//zoomla.github.io/bootstrap4-zhcn-documentation" target="_blank" rel="noopener" aria-label="GitHub">
      <svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 499.36" focusable="false">
        <title>GitHub</title>
        <path d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z" fill="currentColor" fill-rule="evenodd"/>
      </svg>
      </a> </li>
    <li class="nav-item"> <a class="nav-link p-2" href="http://www.z01.com/blog/ren/3214.shtml" target="_blank" rel="noopener" aria-label="Slack">译者说</a></li>
  </ul>
  <a class="btn btn-bd-yellow d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="download.html">下载 Bootstrap</a> </header>

<div class="container-fluid">
  <div class="row flex-xl-nowrap">
    <div class="col-12 col-md-3 col-xl-2 bd-sidebar">
      <form class="bd-search d-flex align-items-center">
        <input type="search" class="form-control" id="search-input" placeholder="Search..." aria-label="Search for..." autocomplete="off">
        <button class="btn btn-link bd-search-docs-toggle d-md-none p-0 ml-3" type="button" data-toggle="collapse" data-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
        <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 30 30" width="30" height="30" focusable="false">
          <title>Menu</title>
          <path stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" d="M4 7h22M4 15h22M4 23h22"/>
        </svg>
        </button>
      </form>


<nav class="collapse bd-links" id="bd-docs-nav">
<div class=""><a href="../" class="bd-toc-link">首页</a></div>
<div class="bd-toc-item nuxt-link-exact-active "><a href="../../../bootstrap-vue/docs/" class="bd-toc-link  "> 起步 </a>
<ul class="nav bd-sidenav">
</ul>
</div>
<div class="bd-toc-item active"><a href="../../../bootstrap-vue/docs/components/" class="bd-toc-link nuxt-link-exact-active"> 组件 </a>
<ul class="nav bd-sidenav">
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/index.html" class="nav-link"> 组件目录 </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/alert.html" class="nav-link"> 警告提示框(Alert) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/badge.html" class="nav-link"> 徽章(Badge) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/badge.html" class="nav-link"> 面包屑导航(Breadcrumb) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/button.html" class="nav-link"> 按钮(Button) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/button-group.html" class="nav-link"> 按钮组(Button Group) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/button-toolbar.html" class="nav-link"> 按钮Toolbar(Button Toolbar) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/calendar.html" class="nav-link"> 日历组件(Calendar) <small class="badge text-uppercase badge-success">New</small> </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/card.html" class="nav-link"> 卡片(Card) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/carousel.html" class="nav-link"> 轮播效果(Carousel) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/collapse.html" class="nav-link"> 折叠面板(Collapse) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/dropdown.html" class="nav-link"> 下拉菜单(Dropdown) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/embed.html" class="nav-link"> 嵌入(Embed) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form.html" class="nav-link"> 表单(Form) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-checkbox.html" class="nav-link"> 表单复选框(Form Checkbox) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-datepicker.html" class="nav-link"> 表单时间选择器(Form Datepicker) <small class="badge text-uppercase badge-success">New</small> </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-file.html" class="nav-link"> 文件选择(Form File) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-group.html" class="nav-link"> 表单组合(Form Group) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-input.html" class="nav-link"> 表单输入框(Form Input) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-radio.html" class="nav-link"> 单选择表单Form Radio </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-select.html" class="nav-link"> 下拉式表单(Form Select) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-spinbutton.html" class="nav-link"> 按钮式表单(Form Spinbuttno) <small class="badge text-uppercase badge-success">New</small> </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-tags.html" class="nav-link"> Tags表单选择器(Form Tags) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-textarea.html" class="nav-link"> 文本框(Form Textarea) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-timepicker.html" class="nav-link"> 表单内时间控件(Form Timepicker) </a></li>
<li class="nav-item active"><a href="../../../bootstrap-vue/docs/components/image.html" class="nav-link"> 图片(Image) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/input-group.html" class="nav-link"> 输入框(Input Group) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/jumbotron.html" class="nav-link"> Hero大块屏(Jumbotron) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/layout.html" class="nav-link"> 布局与网络Layout and Grid System </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/link.html" class="nav-link"> 链接(Link)</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/list-group.html" class="nav-link"> 列表组(List group) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/media.html" class="nav-link"> 媒体(Media) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/modal.html" class="nav-link"> 弹出模态框(Modal) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/nav.html" class="nav-link"> 导航(Nav) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/navbar.html" class="nav-link"> 导航栏(Navbar) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/pagination.html" class="nav-link"> 分页(Pagination) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/pagination-nav.html" class="nav-link"> 分页导航(Pagination Nav) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/popover.html" class="nav-link"> 指示备注(Popover) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/progress.html" class="nav-link"> 进度指示器(Progress) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/spinner.html" class="nav-link"> 旋转指示器(Spinner) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/table.html" class="nav-link"> 表格(Table) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/tabs.html" class="nav-link"> 选项卡(Tabs) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/time.html" class="nav-link"> 时间组件(Time) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/toast.html" class="nav-link"> 冒泡推送(Toasts) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/tooltip.html" class="nav-link"> tip提示组件(Tooltip) </a></li>
</ul>
</div>
<div class="bd-toc-item"><a href="../../../bootstrap-vue/docs/directives/" class="bd-toc-link"> 指令 </a>
<ul class="nav bd-sidenav">
<li class="nav-item"><a href="../../../bootstrap-vue/docs/directives/index.html" class="nav-link"> 指令目录 </a></li>
<li class="nav-item active"><a href="../../../bootstrap-vue/docs/directives/hover.html" class="nav-link"> Hover 指令<small class="badge text-uppercase badge-success">New</small> </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/directives/popover.html" class="nav-link"> Popover 提示备注</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/directives/scrollspy.html" class="nav-link"> Scrollspy 滚动监听</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/directives/tooltip.html" class="nav-link"> Tooltip 提示指令</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/directives/visible.html" class="nav-link"> Visible 可见性操作<small class="badge text-uppercase badge-success">New</small> </a></li>
</ul>
</div>
<div class="bd-toc-item"><a href="../../../bootstrap-vue/docs/icons.html" class="bd-toc-link"> Icons图标</a>
<ul class="nav bd-sidenav">
</ul>
</div>
  
<div class="bd-toc-item"><a class="bd-toc-link" href="../../../bootstrap-vue/docs/reference">参考</a>
<ul class="nav bd-sidenav">
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference" class="nav-link.html"> 参考目录 </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/accessibility.html" class="nav-link">友好访问</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/color-variants.html" class="nav-link">Color颜色变量 </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/images.html" class="nav-link"> 组件图像img的src路径解析</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/router-links.html" class="nav-link"> Router路由支持 </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/size-props.html" class="nav-link">大小规格</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/spacing-classes.html" class="nav-link">间距处理</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/starter-templates.html" class="nav-link">开始模板</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/theming.html" class="nav-link">主题色彩</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/utility-classes.html" class="nav-link">通用Class类</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/validation.html" class="nav-link">Form表单验证</a></li>
</ul>
</div>
<div class=""><a href="https://bootstrap-vue.org/play" class="bd-toc-link" target="_blank">在线模拟器</a></div>
</nav>
</div>

<div class="d-none d-xl-block col-xl-2 bd-toc">

<ul class="section-nav">
<li class="nav-item toc-entry mb-2"><a target="_self" href="#images" class="nav-link font-weight-bold"><span>图片(Images)</span></a></li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#image-src-resolving" class="nav-link"><span>图像 src 解析</span></a> <!----></li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#styling-images" class="nav-link"><span>图像样式</span></a>
<ul class="nav flex-column">
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#responsive-images" class="nav-link"><span>响应式图像</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#image-thumbnails" class="nav-link"><span>图片缩略图</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#rounded-corners" class="nav-link"><span>圆角</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#aligning-images" class="nav-link"><span>对齐图像</span></a></li>
</ul>
</li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#blank-or-solid-color-images" class="nav-link"><span>空白（或纯色）图像</span></a> <!----></li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#srcset-support" class="nav-link"><span>srcset 支持</span></a> <!----></li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#lazy-loaded-images" class="nav-link"><span>延迟加载的图像</span></a>
<ul class="nav flex-column">
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#usage" class="nav-link"><span>用法</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#force-show-of-lazy-loaded-image" class="nav-link"><span>强制显示延迟加载的图像</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#lazy-loaded-srcset-support" class="nav-link"><span>懒加载 srcset 支持</span></a></li>
</ul>
</li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#component-reference" class="nav-link"><span>组件引用</span></a>
<ul class="nav flex-column">
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#comp-ref-b-img" class="nav-link"><span>&lt;b-img&gt;</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#comp-ref-b-img-lazy" class="nav-link"><span>&lt;b-img-lazy&gt;</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#importing-individual-components" class="nav-link"><span>导入单个组件</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#importing-as-a-plugin" class="nav-link"><span>导入为Vue.js插件</span></a></li>
</ul>
</li>
</ul>
</div>

<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">

<nav data-v-aafc4aea="" aria-label="Breadcrumbs" class="float-left mt-2 mb-0 mb-lg-2">
<ol data-v-aafc4aea="" class="breadcrumb d-inline-flex bg-transparent px-2 py-1 my-0">
<li data-v-aafc4aea="" class="breadcrumb-item"><a data-v-aafc4aea="" href="../../" class="nuxt-link-active" target="_self">首页</a></li>
<li data-v-aafc4aea="" class="breadcrumb-item"><a data-v-aafc4aea="" href="../../../bootstrap-vue/docs" class="nuxt-link-active" target="_self">中文手册</a></li>
<li data-v-aafc4aea="" class="breadcrumb-item"><a data-v-aafc4aea="" href="../../../bootstrap-vue/docs/components/" class="nuxt-link-active" target="_self">组件</a></li>
<li data-v-aafc4aea="" class="breadcrumb-item active"><span data-v-aafc4aea="" aria-current="location">图片</span></li>
</ol>
</nav>
<div class="clearfix d-block"></div>
  <h1 class="bd-title" id="content">图片(Images)</h1>
<p class="bd-lead">用于使图像（通过 <code translate="no" class="notranslate text-nowrap">&lt;b-img&gt;</code> 组件）进入响应行为的文档和示例（这样，它们就不会变得比其父元素大），可以选择通过为它们添加轻型样式（全部通过属性）。</p>
  <script type="text/javascript" src="../../../v4/assets/js/pupCMS.js"></script>




<nav class="bd-quick-links mb-3 d-xl-none" data-v-811345e6="">
<header data-v-811345e6="">
<button data-v-811345e6="" type="button" class="btn font-weight-bold btn-outline-secondary btn-sm btn-block collapsed" aria-controls="bd-quick-links-collapse" aria-expanded="false"><span data-v-811345e6="">Show</span> page table of contents </button>
</header>
<ul data-v-811345e6="" id="bd-quick-links-collapse" class="collapse" style="display: none;">
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#image-src-resolving" class=""><span data-v-811345e6="">Image src resolving</span></a> <!----></li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#styling-images" class=""><span data-v-811345e6="">Styling images</span></a>
<ul data-v-811345e6="">
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#responsive-images" class=""><span data-v-811345e6="">Responsive images</span></a></li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#image-thumbnails" class=""><span data-v-811345e6="">Image thumbnails</span></a></li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#rounded-corners" class=""><span data-v-811345e6="">Rounded corners</span></a></li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#aligning-images" class=""><span data-v-811345e6="">Aligning images</span></a></li>
</ul>
</li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#blank-or-solid-color-images" class=""><span data-v-811345e6="">Blank (or solid color) images</span></a> <!----></li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#srcset-support" class=""><span data-v-811345e6="">srcset support</span></a> <!----></li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#lazy-loaded-images" class=""><span data-v-811345e6="">Lazy loaded images</span></a>
<ul data-v-811345e6="">
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#usage" class=""><span data-v-811345e6="">Usage</span></a></li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#force-show-of-lazy-loaded-image" class=""><span data-v-811345e6="">Force show of lazy loaded image</span></a></li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#lazy-loaded-srcset-support" class=""><span data-v-811345e6="">Lazy loaded srcset support</span></a></li>
</ul>
</li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#component-reference" class=""><span data-v-811345e6="">Component reference</span></a>
<ul data-v-811345e6="">
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#comp-ref-b-img" class=""><span data-v-811345e6="">&lt;b-img&gt;</span></a></li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#comp-ref-b-img-lazy" class=""><span data-v-811345e6="">&lt;b-img-lazy&gt;</span></a></li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#importing-individual-components" class=""><span data-v-811345e6="">Importing individual components</span></a></li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#importing-as-a-plugin" class=""><span data-v-811345e6="">Importing as a Vue.js plugin</span></a></li>
</ul>
</li>
</ul>
</nav>
<p>BootstrapVue 的图像组件支持圆形图像，缩略图样式，对齐方式，甚至还可以创建具有可选纯色背景颜色的空白图像。可通过 <code translate="no" class="notranslate text-nowrap">&lt;b-img-lazy&gt;</code> 免费组件获得对延迟加载的图像的支持。</p>
<h2 id="image-src-resolving" class="bv-no-focus-ring"><span class="bd-content-title">图像 src 解析<a class="anchorjs-link" href="#image-src-resolving" aria-labelledby="image-src-resolving"></a></span></h2>
<p>开箱即用的 <code translate="no" class="notranslate text-nowrap">src</code> 属性（和 <code translate="no" class="notranslate text-nowrap">&lt;b-img-lazy&gt;</code> 的 <code translate="no" class="notranslate text-nowrap">blank-src</code> 属性）仅适用于绝对或完全限定的域名URL。如果您将项目资产用作图像源，请参阅 <a href="../../../bootstrap-vue/docs/reference/images" class="font-weight-bold">Component img src resolving</a>【组件 img src解析】以配置 <code translate="no" class="notranslate text-nowrap">vue-loader</code> 来了解指定图像源的自定义组件属性。</p>
<h2 id="styling-images" class="bv-no-focus-ring"><span class="bd-content-title">图像样式<a class="anchorjs-link" href="#styling-images" aria-labelledby="styling-images"></a></span></h2>
<p>可以使用几种道具来设置渲染图像元素的样式。以下小节介绍了各种选项。</p>
<h3 id="responsive-images" class="bv-no-focus-ring"><span class="bd-content-title">响应式图像<a class="anchorjs-link" href="#responsive-images" aria-labelledby="responsive-images"></a></span></h3>
<p>BootstrapVue 中的图像可以使用 <code translate="no" class="notranslate text-nowrap">fluid</code> 属性（通过 CSS 类设置 <code translate="no" class="notranslate text-nowrap">max-width: 100%; height: auto;</code> 通过 CSS 类）进行响应，以便它与父元素一起缩放-直到图像的最大本机宽度。</p>
<div translate="translate" class="bd-example vue-example vue-example-b-img-fluid notranslate">
<div><img src="https://picsum.photos/1024/400/?image=41" alt="Responsive image" class="img-fluid"></div>
</div>
<figure class="highlight"><pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://picsum.photos/1024/400/?image=41"</span> <span class="hljs-attr">fluid</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">"Responsive image"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-img</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></pre></figure>
<p>要制作将增长到充满其容器宽度的流体图像，请使用 <code translate="no" class="notranslate text-nowrap">fluid-grow</code> 属性。请注意，这可能会导致小的位图图像模糊。</p>
<div translate="translate" class="bd-example vue-example vue-example-b-img-fluid-grow notranslate">
<div>
<h5>Small image with <code>fluid</code>:</h5>
<img src="https://picsum.photos/300/150/?image=41" alt="Fluid image" class="img-fluid">
<h5 class="my-3">Small image with <code>fluid-grow</code>:</h5>
<img src="https://picsum.photos/300/150/?image=41" alt="Fluid-grow image" class="img-fluid w-100"></div>
</div>
<figure class="highlight"><pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">h5</span>&gt;</span>Small image with <span class="hljs-tag">&lt;<span class="hljs-name">code</span>&gt;</span>fluid<span class="hljs-tag">&lt;/<span class="hljs-name">code</span>&gt;</span>:<span class="hljs-tag">&lt;/<span class="hljs-name">h5</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://picsum.photos/300/150/?image=41"</span> <span class="hljs-attr">fluid</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">"Fluid image"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-img</span>&gt;</span>

  <span class="hljs-tag">&lt;<span class="hljs-name">h5</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"my-3"</span>&gt;</span>Small image with <span class="hljs-tag">&lt;<span class="hljs-name">code</span>&gt;</span>fluid-grow<span class="hljs-tag">&lt;/<span class="hljs-name">code</span>&gt;</span>:<span class="hljs-tag">&lt;/<span class="hljs-name">h5</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://picsum.photos/300/150/?image=41"</span> <span class="hljs-attr">fluid-grow</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">"Fluid-grow image"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-img</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></pre></figure>
<p>使用 <code translate="no" class="notranslate text-nowrap">block</code> 属性强制将图像显示为块元素，而不是浏览器默认的 inline-block 元素。</p>
<p><strong>注意：</strong> <em>在 Internet Explorer 10 中，带有 <code translate="no" class="notranslate text-nowrap">fluid</code> 的 SVG 图像的大小不成比例。要解决此问题，请添加样式 <code translate="no" class="notranslate text-nowrap">width: 100% \9;</code> 在必要时。此修复程序不适当地调整了其他图像格式的大小，因此 Bootstrap v4 不会自动应用它。</em></p>
<h3 id="image-thumbnails" class="bv-no-focus-ring"><span class="bd-content-title">图片缩略图<a class="anchorjs-link" href="#image-thumbnails" aria-labelledby="image-thumbnails"></a></span></h3>
<p>您可以使用 <code translate="no" class="notranslate text-nowrap">thumbnail</code>【缩略图】属性为图像赋予圆角的浅色边框外观。</p>
<div translate="translate" class="bd-example vue-example vue-example-b-img-thumbnail notranslate">
<div class="p-4 bg-dark container-fluid">
<div class="row">
<div class="col"><img src="https://picsum.photos/250/250/?image=54" alt="Image 1" class="img-thumbnail img-fluid"></div>
<div class="col"><img src="https://picsum.photos/250/250/?image=58" alt="Image 2" class="img-thumbnail img-fluid"></div>
<div class="col"><img src="https://picsum.photos/250/250/?image=59" alt="Image 3" class="img-thumbnail img-fluid"></div>
</div>
</div>
</div>
<figure class="highlight"><pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">b-container</span> <span class="hljs-attr">fluid</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"p-4 bg-dark"</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-row</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-col</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-img</span> <span class="hljs-attr">thumbnail</span> <span class="hljs-attr">fluid</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://picsum.photos/250/250/?image=54"</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">"Image 1"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-img</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">b-col</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-col</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-img</span> <span class="hljs-attr">thumbnail</span> <span class="hljs-attr">fluid</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://picsum.photos/250/250/?image=58"</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">"Image 2"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-img</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">b-col</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-col</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-img</span> <span class="hljs-attr">thumbnail</span> <span class="hljs-attr">fluid</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://picsum.photos/250/250/?image=59"</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">"Image 3"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-img</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">b-col</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">b-row</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">b-container</span>&gt;</span></pre></figure>
<h3 id="rounded-corners" class="bv-no-focus-ring"><span class="bd-content-title">圆角<a class="anchorjs-link" href="#rounded-corners" aria-labelledby="rounded-corners"></a></span></h3>
<p>通过将圆角支柱设置为以下值之一，可以控制圆角：</p>
<ul>
<li><code translate="no" class="notranslate text-nowrap">true</code>（或属性没有值）：四舍五入</li>
<li><code translate="no" class="notranslate text-nowrap">false</code>（或属性不存在）：无明显的圆角或角（默认）</li>
<li><code translate="no" class="notranslate text-nowrap">'top'</code>: 圆角</li>
<li><code translate="no" class="notranslate text-nowrap">'right'</code>: 右上角</li>
<li><code translate="no" class="notranslate text-nowrap">'bottom'</code>: 圆底角</li>
<li><code translate="no" class="notranslate text-nowrap">'left'</code>: 左上角</li>
<li><code translate="no" class="notranslate text-nowrap">'circle'</code>: 制作一个圆形（如果是方形图像）或椭圆形（如果不是方形）边框</li>
<li><code translate="no" class="notranslate text-nowrap">'0'</code>: 明确关闭圆角</li>
</ul>
<div translate="translate" class="bd-example vue-example vue-example-b-img-rounded notranslate">
<div><img src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2275%22%20height%3D%2275%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20%25%7Bw%7D%20%25%7Bh%7D%22%20preserveAspectRatio%3D%22none%22%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20style%3D%22fill%3A%23777%3B%22%3E%3C%2Frect%3E%3C%2Fsvg%3E" alt="Rounded image" width="75" height="75" class="rounded m1"> <img src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2275%22%20height%3D%2275%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20%25%7Bw%7D%20%25%7Bh%7D%22%20preserveAspectRatio%3D%22none%22%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20style%3D%22fill%3A%23777%3B%22%3E%3C%2Frect%3E%3C%2Fsvg%3E" alt="Top-rounded image" width="75" height="75" class="rounded-top m1"> <img src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2275%22%20height%3D%2275%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20%25%7Bw%7D%20%25%7Bh%7D%22%20preserveAspectRatio%3D%22none%22%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20style%3D%22fill%3A%23777%3B%22%3E%3C%2Frect%3E%3C%2Fsvg%3E" alt="Right-rounded image" width="75" height="75" class="rounded-right m1"> <img src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2275%22%20height%3D%2275%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20%25%7Bw%7D%20%25%7Bh%7D%22%20preserveAspectRatio%3D%22none%22%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20style%3D%22fill%3A%23777%3B%22%3E%3C%2Frect%3E%3C%2Fsvg%3E" alt="Bottom-rounded image" width="75" height="75" class="rounded-bottom m1"> <img src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2275%22%20height%3D%2275%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20%25%7Bw%7D%20%25%7Bh%7D%22%20preserveAspectRatio%3D%22none%22%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20style%3D%22fill%3A%23777%3B%22%3E%3C%2Frect%3E%3C%2Fsvg%3E" alt="Left-rounded image" width="75" height="75" class="rounded-left m1"> <img src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2275%22%20height%3D%2275%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20%25%7Bw%7D%20%25%7Bh%7D%22%20preserveAspectRatio%3D%22none%22%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20style%3D%22fill%3A%23777%3B%22%3E%3C%2Frect%3E%3C%2Fsvg%3E" alt="Circle image" width="75" height="75" class="rounded-circle m1"> <img src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2275%22%20height%3D%2275%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20%25%7Bw%7D%20%25%7Bh%7D%22%20preserveAspectRatio%3D%22none%22%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20style%3D%22fill%3A%23777%3B%22%3E%3C%2Frect%3E%3C%2Fsvg%3E" alt="Not rounded image" width="75" height="75" class="rounded-0 m1"></div>
</div>
<figure class="highlight"><pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">template</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-img</span> <span class="hljs-attr">v-bind</span>=<span class="hljs-string">"mainProps"</span> <span class="hljs-attr">rounded</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">"Rounded image"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-img</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-img</span> <span class="hljs-attr">v-bind</span>=<span class="hljs-string">"mainProps"</span> <span class="hljs-attr">rounded</span>=<span class="hljs-string">"top"</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">"Top-rounded image"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-img</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-img</span> <span class="hljs-attr">v-bind</span>=<span class="hljs-string">"mainProps"</span> <span class="hljs-attr">rounded</span>=<span class="hljs-string">"right"</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">"Right-rounded image"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-img</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-img</span> <span class="hljs-attr">v-bind</span>=<span class="hljs-string">"mainProps"</span> <span class="hljs-attr">rounded</span>=<span class="hljs-string">"bottom"</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">"Bottom-rounded image"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-img</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-img</span> <span class="hljs-attr">v-bind</span>=<span class="hljs-string">"mainProps"</span> <span class="hljs-attr">rounded</span>=<span class="hljs-string">"left"</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">"Left-rounded image"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-img</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-img</span> <span class="hljs-attr">v-bind</span>=<span class="hljs-string">"mainProps"</span> <span class="hljs-attr">rounded</span>=<span class="hljs-string">"circle"</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">"Circle image"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-img</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-img</span> <span class="hljs-attr">v-bind</span>=<span class="hljs-string">"mainProps"</span> <span class="hljs-attr">rounded</span>=<span class="hljs-string">"0"</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">"Not rounded image"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-img</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span>

<span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript">
  <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {
    data() {
      <span class="hljs-keyword">return</span> {
        <span class="hljs-attr">mainProps</span>: { <span class="hljs-attr">blank</span>: <span class="hljs-literal">true</span>, <span class="hljs-attr">blankColor</span>: <span class="hljs-string">'#777'</span>, <span class="hljs-attr">width</span>: <span class="hljs-number">75</span>, <span class="hljs-attr">height</span>: <span class="hljs-number">75</span>, <span class="hljs-attr">class</span>: <span class="hljs-string">'m1'</span> }
      }
    }
  }
</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></pre></figure>
<h3 id="aligning-images" class="bv-no-focus-ring"><span class="bd-content-title">对齐图像<a class="anchorjs-link" href="#aligning-images" aria-labelledby="aligning-images"></a></span></h3>
<p>使图像的布尔属性 <code translate="no" class="notranslate text-nowrap">left</code>（左浮动），<code translate="no" class="notranslate text-nowrap">right</code>（右浮动），和 <code translate="no" class="notranslate text-nowrap">center</code>（自动左边缘与右边缘）。 您还可以通过将图像放在具有 <code translate="no" class="notranslate text-nowrap">text-center</code> 类的容器中来使图像居中.</p>
<p><strong>左右对齐（浮动）：</strong></p>
<div translate="translate" class="bd-example vue-example vue-example-b-img-left-right notranslate">
<div class="clearfix"><img src="https://picsum.photos/125/125/?image=58" alt="Left image" class="float-left"> <img src="https://picsum.photos/125/125/?image=58" alt="Right image" class="float-right"></div>
</div>
<figure class="highlight"><pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"clearfix"</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-img</span> <span class="hljs-attr">left</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://picsum.photos/125/125/?image=58"</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">"Left image"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-img</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-img</span> <span class="hljs-attr">right</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://picsum.photos/125/125/?image=58"</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">"Right image"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-img</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></pre></figure>
<p><strong>居中对齐（块级）：</strong></p>
<div translate="translate" class="bd-example vue-example vue-example-b-img-center notranslate">
<div><img src="https://picsum.photos/125/125/?image=58" alt="Center image" class="mx-auto d-block"></div>
</div>
<figure class="highlight"><pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-img</span> <span class="hljs-attr">center</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://picsum.photos/125/125/?image=58"</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">"Center image"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-img</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></pre></figure>
<p>注意：<code translate="no" class="notranslate text-nowrap">left</code> 优先于 <code translate="no" class="notranslate text-nowrap">right</code> ，后者优先于 <code translate="no" class="notranslate text-nowrap">center</code> 。</p>
<h2 id="blank-or-solid-color-images" class="bv-no-focus-ring"><span class="bd-content-title">空白（或纯色）图像<a class="anchorjs-link" href="#blank-or-solid-color-images" aria-labelledby="blank-or-solid-color-images"></a></span></h2>
<p><code translate="no" class="notranslate text-nowrap">&lt;b-img&gt;</code> 通过设置 <code translate="no" class="notranslate text-nowrap">blank</code>【空白】属性并指定  <code translate="no" class="notranslate text-nowrap">width</code> 和 <code translate="no" class="notranslate text-nowrap">height</code> 值（以像素为单位）来提供内置支持，以生成任意宽度和高度的空白图像（默认情况下是透明的）。您可以应用任何其他 <code translate="no" class="notranslate text-nowrap">&lt;b-img&gt;</code> 属性来更改所生成图像的样式/行为。</p>
<p>使用 <code translate="no" class="notranslate text-nowrap">blank-color</code> 属性设置空白图像颜色。<code translate="no" class="notranslate text-nowrap">blank-color</code> 属性可以接受任何 CSS 颜色值：</p>
<ul>
<li>命名的颜色-即 <code translate="no" class="notranslate text-nowrap">orange</code> 或 <code translate="no" class="notranslate text-nowrap">blue</code></li>
<li>十六进制颜色-即 <code translate="no" class="notranslate text-nowrap">#FF9E2C</code></li>
<li>RGB 和 RGBa 颜色-即<code translate="no" class="notranslate text-nowrap">rgb(255, 158, 44)</code> 和 <code translate="no" class="notranslate text-nowrap">rgba(255, 158, 44, .5)</code></li>
<li>HSL 和 HSLa 颜色-即 <code translate="no" class="notranslate text-nowrap">hsl(32, 100%, 59%)</code> 和 <code translate="no" class="notranslate text-nowrap">hsla(32, 100%, 59%, .5)</code></li>
</ul>
<p>默认的 <code translate="no" class="notranslate text-nowrap">blank-color</code> 是 <code translate="no" class="notranslate text-nowrap">transparent</code>【透明的】。</p>
<div translate="translate" class="bd-example vue-example vue-example-b-img-blank notranslate">
<div><img src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2275%22%20height%3D%2275%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20%25%7Bw%7D%20%25%7Bh%7D%22%20preserveAspectRatio%3D%22none%22%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20style%3D%22fill%3Atransparent%3B%22%3E%3C%2Frect%3E%3C%2Fsvg%3E" alt="Transparent image" width="75" height="75" class="m1"> <img src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2275%22%20height%3D%2275%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20%25%7Bw%7D%20%25%7Bh%7D%22%20preserveAspectRatio%3D%22none%22%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20style%3D%22fill%3A%23777%3B%22%3E%3C%2Frect%3E%3C%2Fsvg%3E" alt="HEX shorthand color image (#777)" width="75" height="75" class="m1"> <img src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2275%22%20height%3D%2275%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20%25%7Bw%7D%20%25%7Bh%7D%22%20preserveAspectRatio%3D%22none%22%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20style%3D%22fill%3Ared%3B%22%3E%3C%2Frect%3E%3C%2Fsvg%3E" alt="Named color image (red)" width="75" height="75" class="m1"> <img src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2275%22%20height%3D%2275%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20%25%7Bw%7D%20%25%7Bh%7D%22%20preserveAspectRatio%3D%22none%22%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20style%3D%22fill%3Ablack%3B%22%3E%3C%2Frect%3E%3C%2Fsvg%3E" alt="Named color image (black)" width="75" height="75" class="m1"> <img src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2275%22%20height%3D%2275%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20%25%7Bw%7D%20%25%7Bh%7D%22%20preserveAspectRatio%3D%22none%22%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20style%3D%22fill%3A%23338833%3B%22%3E%3C%2Frect%3E%3C%2Fsvg%3E" alt="HEX color image" width="75" height="75" class="m1"> <img src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2275%22%20height%3D%2275%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20%25%7Bw%7D%20%25%7Bh%7D%22%20preserveAspectRatio%3D%22none%22%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20style%3D%22fill%3Argba(128%2C%20255%2C%20255%2C%200.5)%3B%22%3E%3C%2Frect%3E%3C%2Fsvg%3E" alt="RGBa color image" width="75" height="75" class="m1"> <img src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2275%22%20height%3D%2275%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20%25%7Bw%7D%20%25%7Bh%7D%22%20preserveAspectRatio%3D%22none%22%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20style%3D%22fill%3A%2388f%3B%22%3E%3C%2Frect%3E%3C%2Fsvg%3E" alt="HEX shorthand color (#88f)" width="75" height="75" class="m1"></div>
</div>
<figure class="highlight"><pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">template</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-img</span> <span class="hljs-attr">v-bind</span>=<span class="hljs-string">"mainProps"</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">"Transparent image"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-img</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-img</span> <span class="hljs-attr">v-bind</span>=<span class="hljs-string">"mainProps"</span> <span class="hljs-attr">blank-color</span>=<span class="hljs-string">"#777"</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">"HEX shorthand color image (#777)"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-img</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-img</span> <span class="hljs-attr">v-bind</span>=<span class="hljs-string">"mainProps"</span> <span class="hljs-attr">blank-color</span>=<span class="hljs-string">"red"</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">"Named color image (red)"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-img</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-img</span> <span class="hljs-attr">v-bind</span>=<span class="hljs-string">"mainProps"</span> <span class="hljs-attr">blank-color</span>=<span class="hljs-string">"black"</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">"Named color image (black)"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-img</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-img</span> <span class="hljs-attr">v-bind</span>=<span class="hljs-string">"mainProps"</span> <span class="hljs-attr">blank-color</span>=<span class="hljs-string">"#338833"</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">"HEX color image"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-img</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-img</span> <span class="hljs-attr">v-bind</span>=<span class="hljs-string">"mainProps"</span> <span class="hljs-attr">blank-color</span>=<span class="hljs-string">"rgba(128, 255, 255, 0.5)"</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">"RGBa color image"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-img</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-img</span> <span class="hljs-attr">v-bind</span>=<span class="hljs-string">"mainProps"</span> <span class="hljs-attr">blank-color</span>=<span class="hljs-string">"#88f"</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">"HEX shorthand color (#88f)"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-img</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span>

<span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript">
  <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {
    data() {
      <span class="hljs-keyword">return</span> {
        <span class="hljs-attr">mainProps</span>: { <span class="hljs-attr">blank</span>: <span class="hljs-literal">true</span>, <span class="hljs-attr">width</span>: <span class="hljs-number">75</span>, <span class="hljs-attr">height</span>: <span class="hljs-number">75</span>, <span class="hljs-attr">class</span>: <span class="hljs-string">'m1'</span> }
      }
    }
  }
</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></pre></figure>
<p><strong>注意：</strong></p>
<ul>
<li>在空白图像模式下，如果仅设置宽度或高度之一，则图像的宽度和高度都将设置为相同的值。</li>
<li>在空白图像模式下，如果未设置宽度和高度，则宽度和高度都将在内部设置为 1。</li>
<li><code translate="no" class="notranslate text-nowrap">blank</code> 属性优先于 <code translate="no" class="notranslate text-nowrap">src</code> 属性。如果同时设置了两者，然后将 <code translate="no" class="notranslate text-nowrap">blank</code> 设置为 <code translate="no" class="notranslate text-nowrap">false</code> ，则将显示 <code translate="no" class="notranslate text-nowrap">src</code> 中指定的图像。</li>
<li>使用 SVG 图像数据 URL 渲染空白图像。</li>
<li>即使未设置 <code translate="no"  tag, even if <code translate="no" class="notranslate text-nowrap">blank</code> ，<code translate="no" class="notranslate text-nowrap">width</code> 和 <code translate="no" class="notranslate text-nowrap">height</code> 属性也会将 <code translate="no" class="notranslate text-nowrap">width</code> 和 <code translate="no" class="notranslate text-nowrap">height</code> 属性应用于渲染的 <code class="notranslate text-nowrap">&lt;img&gt;</code> 标签。</li>
</ul>
<h2 id="srcset-support" class="bv-no-focus-ring"><span class="bd-content-title"><code translate="no" class="notranslate text-nowrap">srcset</code> 支持<a class="anchorjs-link" href="#srcset-support" aria-labelledby="srcset-support"></a></span></h2>
<p><code translate="no" class="notranslate text-nowrap">&lt;b-img&gt;</code> 支持图像上的 <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-srcset" target="_blank" rel="noopener"><code translate="no" class="notranslate text-nowrap">srcset</code> 和 <code translate="no" class="notranslate text-nowrap">sizes</code> 属性</a> 。属性接受一个字符串值或一个字符串数组（该字符串数组将转换为单个字符串，以逗号分隔）。</p>
<p>有关这些属性的用法的详细信息，请参阅 <a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images" target="_blank" rel="noopener">MDN's Responsive Images</a>【MDN的响应式图像指南】。</p>
<p><strong>注意：</strong></p>
<ul>
<li>如果设置了 <code translate="no" class="notranslate text-nowrap">blank</code> 属性，那么将忽略 <code translate="no" class="notranslate text-nowrap">srcset</code> 和 <code translate="no" class="notranslate text-nowrap">sizes</code> 属性</li>
<li>IE 11不支持 <code translate="no" class="notranslate text-nowrap">srcset</code> 和 <code translate="no" class="notranslate text-nowrap">sizes</code> ，因此请确保您具有 <code translate="no" class="notranslate text-nowrap">src</code> 属性值</li>
<li>Vue-loader在 <code translate="no" class="notranslate text-nowrap">srcset</code> 属性上不支持项目相对 URL（资产URL）。 而是使用 <code translate="no" class="notranslate text-nowrap">require(...)</code> 来解析各个URL路径。 请谨慎创建比浏览器的最大属性值长度所支持的数据URI字符串长的字符串。 如果您的 webpack 配置对 <code translate="no" class="notranslate text-nowrap">url-loader</code>有限制，并且您想阻止内联数据 URL，则可能必须覆盖加载器限制：<code translate="no" class="notranslate text-nowrap">require('!!url-loader?limit=0!./assets/photo.jpg')</code></li>
<li>在版本 <code translate="no" class="notranslate text-nowrap">2.1.0</code> 中添加了对 <code translate="no" class="notranslate text-nowrap">srcset</code> 和 <code translate="no" class="notranslate text-nowrap">sizes</code> 的支持</li>
</ul>
<h2 id="lazy-loaded-images" class="bv-no-focus-ring"><span class="bd-content-title">延迟加载的图像<a class="anchorjs-link" href="#lazy-loaded-images" aria-labelledby="lazy-loaded-images"></a></span></h2>
<p class="bd-lead">使用我们互补的 <code translate="no" class="notranslate text-nowrap">&lt;b-img-lazy&gt;</code> 图像组件（基于 <code translate="no" class="notranslate text-nowrap">&lt;b-img&gt;</code> ）在图像滚动到视图中时（或在视口的 <code translate="no" class="notranslate text-nowrap">offset</code>【偏移】像素内）延迟加载图像。</p>
<p>如果浏览器支持（或通过polyfill）支持延迟加载图像，请使用 <a href="https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API" target="_blank" rel="noopener"><code translate="no" class="notranslate text-nowrap">IntersectionObserver</code></a> 来检测应显示的图像。如果 <em>未检测到</em> <code translate="no" class="notranslate text-nowrap">IntersectionObserver</code> 支持，则将 <em>始终</em> 显示该图像。</p>
<h3 id="usage" class="bv-no-focus-ring"><span class="bd-content-title">用法<a class="anchorjs-link" href="#usage" aria-labelledby="usage"></a></span></h3>
<p>将 <code translate="no" class="notranslate text-nowrap">src</code> 属性设置为您要延迟加载的图像的URL，然后通过 <code translate="no" class="notranslate text-nowrap">blank-src</code> 属性指定一个占位符图像URL，或者通过将 <code translate="no" class="notranslate text-nowrap">blank-src</code> 保留为 <code translate="no" class="notranslate text-nowrap">null</code> 为您生成一个空白的占位符图像。</p>
<p>通过 <code translate="no" class="notranslate text-nowrap">blank-width</code> 和 <code translate="no" class="notranslate text-nowrap">blank-height</code> 属性指定占位符的宽度和高度。 如果未设置这些道具，则它们将退回到 <code translate="no" class="notranslate text-nowrap">width</code> 和 <code translate="no" class="notranslate text-nowrap">height</code> 属性（应用于通过 <code translate="no" class="notranslate text-nowrap">src</code> 指定的图像）。</p>
<p>通过设置 <code translate="no" class="notranslate text-nowrap">blank-color</code> 属性来控制生成的空白图像颜色。</p>
<p>占位符图像（显式提供或动态生成）应具有与 <code translate="no" class="notranslate text-nowrap">src</code> 图像相同的宽度和高度值，或至少具有相同的宽高比。</p>
<p>随时使用 <code translate="no" class="notranslate text-nowrap">&lt;b-img&gt;</code> 的 <code translate="no" class="notranslate text-nowrap">fluid</code> ，<code translate="no" class="notranslate text-nowrap">fluid-grow</code> ，<code translate="no" class="notranslate text-nowrap">thumbnail</code> ，和 <code translate="no" class="notranslate text-nowrap">rounded</code> 属性。</p>
<p><code translate="no" class="notranslate text-nowrap">offset</code> 属性指定图像需要接近视口才能触发显示的像素数。默认值为 <code translate="no" class="notranslate text-nowrap">360</code> 。</p>
<p><code translate="no" class="notranslate text-nowrap">throttle</code> 属性控制在检查图像是否进入视图（或在视图 <code translate="no" class="notranslate text-nowrap">offset</code> 范围内）之前发生 <code translate="no" class="notranslate text-nowrap">scroll</code>（或 <code translate="no" class="notranslate text-nowrap">resize</code> ，或 <code translate="no" class="notranslate text-nowrap">orientationchange</code> ，
  或 <code translate="no" class="notranslate text-nowrap">transitionend</code>）事件后多长时间（以毫秒为单位）。默认值为 <code translate="no" class="notranslate text-nowrap">100</code>（毫秒）。 如果检测到 IntersectionObserver 支持，则 <code translate="no" class="notranslate text-nowrap">throttle</code> 不起作用。</p>
<p>进入图像并显示图像后，将删除事件侦听器和/或路口观察器。</p>
<p><strong>用法示例：</strong></p>
<div translate="translate" class="bd-example vue-example vue-example-b-img-lazy notranslate">
<div><img src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22600%22%20height%3D%22400%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20%25%7Bw%7D%20%25%7Bh%7D%22%20preserveAspectRatio%3D%22none%22%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20style%3D%22fill%3A%23bbb%3B%22%3E%3C%2Frect%3E%3C%2Fsvg%3E" alt="Image 1" width="600" height="400" class="img-fluid w-100 mx-auto d-block my-5" blank="true"> <img src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22600%22%20height%3D%22400%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20%25%7Bw%7D%20%25%7Bh%7D%22%20preserveAspectRatio%3D%22none%22%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20style%3D%22fill%3A%23bbb%3B%22%3E%3C%2Frect%3E%3C%2Fsvg%3E" alt="Image 2" width="600" height="400" class="img-fluid w-100 mx-auto d-block my-5" blank="true"> <img src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22600%22%20height%3D%22400%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20%25%7Bw%7D%20%25%7Bh%7D%22%20preserveAspectRatio%3D%22none%22%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20style%3D%22fill%3A%23bbb%3B%22%3E%3C%2Frect%3E%3C%2Fsvg%3E" alt="Image 3" width="600" height="400" class="img-fluid w-100 mx-auto d-block my-5" blank="true"> <img src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22600%22%20height%3D%22400%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20%25%7Bw%7D%20%25%7Bh%7D%22%20preserveAspectRatio%3D%22none%22%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20style%3D%22fill%3A%23bbb%3B%22%3E%3C%2Frect%3E%3C%2Fsvg%3E" alt="Image 4" width="600" height="400" class="img-fluid w-100 mx-auto d-block my-5" blank="true"> <img src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22600%22%20height%3D%22400%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20%25%7Bw%7D%20%25%7Bh%7D%22%20preserveAspectRatio%3D%22none%22%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20style%3D%22fill%3A%23bbb%3B%22%3E%3C%2Frect%3E%3C%2Fsvg%3E" alt="Image 5" width="600" height="400" class="img-fluid w-100 mx-auto d-block my-5" blank="true"> <img src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22600%22%20height%3D%22400%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20%25%7Bw%7D%20%25%7Bh%7D%22%20preserveAspectRatio%3D%22none%22%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20style%3D%22fill%3A%23bbb%3B%22%3E%3C%2Frect%3E%3C%2Fsvg%3E" alt="Image 6" width="600" height="400" class="img-fluid w-100 mx-auto d-block my-5" blank="true"> <img src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22600%22%20height%3D%22400%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20%25%7Bw%7D%20%25%7Bh%7D%22%20preserveAspectRatio%3D%22none%22%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20style%3D%22fill%3A%23bbb%3B%22%3E%3C%2Frect%3E%3C%2Fsvg%3E" alt="Image 7" width="600" height="400" class="img-fluid w-100 mx-auto d-block my-5" blank="true"> <img src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22600%22%20height%3D%22400%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20%25%7Bw%7D%20%25%7Bh%7D%22%20preserveAspectRatio%3D%22none%22%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20style%3D%22fill%3A%23bbb%3B%22%3E%3C%2Frect%3E%3C%2Fsvg%3E" alt="Image 8" width="600" height="400" class="img-fluid w-100 mx-auto d-block my-5" blank="true"></div>
</div>
<figure class="highlight"><pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">template</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-img-lazy</span> <span class="hljs-attr">v-bind</span>=<span class="hljs-string">"mainProps"</span> <span class="hljs-attr">:src</span>=<span class="hljs-string">"getImageUrl(80)"</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">"Image 1"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-img-lazy</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-img-lazy</span> <span class="hljs-attr">v-bind</span>=<span class="hljs-string">"mainProps"</span> <span class="hljs-attr">:src</span>=<span class="hljs-string">"getImageUrl(82)"</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">"Image 2"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-img-lazy</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-img-lazy</span> <span class="hljs-attr">v-bind</span>=<span class="hljs-string">"mainProps"</span> <span class="hljs-attr">:src</span>=<span class="hljs-string">"getImageUrl(84)"</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">"Image 3"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-img-lazy</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-img-lazy</span> <span class="hljs-attr">v-bind</span>=<span class="hljs-string">"mainProps"</span> <span class="hljs-attr">:src</span>=<span class="hljs-string">"getImageUrl(85)"</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">"Image 4"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-img-lazy</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-img-lazy</span> <span class="hljs-attr">v-bind</span>=<span class="hljs-string">"mainProps"</span> <span class="hljs-attr">:src</span>=<span class="hljs-string">"getImageUrl(88)"</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">"Image 5"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-img-lazy</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-img-lazy</span> <span class="hljs-attr">v-bind</span>=<span class="hljs-string">"mainProps"</span> <span class="hljs-attr">:src</span>=<span class="hljs-string">"getImageUrl(90)"</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">"Image 6"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-img-lazy</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-img-lazy</span> <span class="hljs-attr">v-bind</span>=<span class="hljs-string">"mainProps"</span> <span class="hljs-attr">:src</span>=<span class="hljs-string">"getImageUrl(92)"</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">"Image 7"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-img-lazy</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-img-lazy</span> <span class="hljs-attr">v-bind</span>=<span class="hljs-string">"mainProps"</span> <span class="hljs-attr">:src</span>=<span class="hljs-string">"getImageUrl(94)"</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">"Image 8"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-img-lazy</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span>

<span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript">
  <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {
    data() {
      <span class="hljs-keyword">return</span> {
        <span class="hljs-attr">mainProps</span>: {
          <span class="hljs-attr">center</span>: <span class="hljs-literal">true</span>,
          <span class="hljs-attr">fluidGrow</span>: <span class="hljs-literal">true</span>,
          <span class="hljs-attr">blank</span>: <span class="hljs-literal">true</span>,
          <span class="hljs-attr">blankColor</span>: <span class="hljs-string">'#bbb'</span>,
          <span class="hljs-attr">width</span>: <span class="hljs-number">600</span>,
          <span class="hljs-attr">height</span>: <span class="hljs-number">400</span>,
          <span class="hljs-attr">class</span>: <span class="hljs-string">'my-5'</span>
        }
      }
    },
    <span class="hljs-attr">methods</span>: {
      getImageUrl(imageId) {
        <span class="hljs-keyword">const</span> { width, height } = <span class="hljs-keyword">this</span>.mainProps
        <span class="hljs-keyword">return</span> <span class="hljs-string">`https://picsum.photos/<span class="hljs-subst">${width}</span>/<span class="hljs-subst">${height}</span>/?image=<span class="hljs-subst">${imageId}</span>`</span>
      }
    }
  }
</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></pre></figure>
<h3 id="force-show-of-lazy-loaded-image" class="bv-no-focus-ring"><span class="bd-content-title">强制显示延迟加载的图像<a class="anchorjs-link" href="#force-show-of-lazy-loaded-image" aria-labelledby="force-show-of-lazy-loaded-image"></a></span></h3>
<p>要强制显示最终图像，请将 <code translate="no" class="notranslate text-nowrap">show</code> 属性设置为 <code translate="no" class="notranslate text-nowrap">true</code> 。<code translate="no" class="notranslate text-nowrap">show</code> 属性支持Vue <code translate="no" class="notranslate text-nowrap">.sync</code> 修饰符，并且在显示最终图像时将更新为 <code translate="no" class="notranslate text-nowrap">true</code> 。</p>
<h3 id="lazy-loaded-srcset-support" class="bv-no-focus-ring"><span class="bd-content-title">懒加载 <code translate="no" class="notranslate text-nowrap">srcset</code> 支持<a class="anchorjs-link" href="#lazy-loaded-srcset-support" aria-labelledby="lazy-loaded-srcset-support"></a></span></h3>
<p><code translate="no" class="notranslate text-nowrap">&lt;b-img-lazy&gt;</code> 支持在呈现的 <code translate="no" class="notranslate text-nowrap">&lt;img&gt;</code> 元素上设置 <a href="#srcset-support" class="font-weight-bold"><code translate="no" class="notranslate text-nowrap">srcset</code> 和 <code translate="no" class="notranslate text-nowrap">sizes</code></a> 属性。这些道具只有在图像出现后才会应用于图像。</p>
<p>有关道具用法的详细信息和限制，请参见上面的 <a href="#srcset-support" class="font-weight-bold"><code translate="no" class="notranslate text-nowrap">srcset</code> 支持</a> 。</p>
<p>在版本 <code translate="no" class="notranslate text-nowrap">2.1.0</code> 中添加了对 <code translate="no" class="notranslate text-nowrap">srcset</code> 和 <code translate="no" class="notranslate text-nowrap">sizes</code> 的支持。</p>
<!-- Component reference added automatically from component package.json --> 
</section>
<section class="bd-content bd-component-reference">
<h2 id="component-reference" tabindex="-1" class="bv-no-focus-ring"><span class="bd-content-title">组件引用<a href="../../../bootstrap-vue/docs/components/image#component-reference" class="anchorjs-link" aria-labelledby="component-reference" target="_self"></a></span></h2>
<section data-v-866a22e8="" class="bd-content">
<header data-v-866a22e8="" class="row align-items-center">
<div data-v-866a22e8="" class="col-sm-9">
<h3 data-v-866a22e8="" id="comp-ref-b-img" tabindex="-1" class="bv-no-focus-ring"><span data-v-866a22e8="" class="bd-content-title"><code data-v-866a22e8="" translate="translate" class="notranslate bigger">&lt;b-img&gt;</code><a data-v-866a22e8="" href="../../../bootstrap-vue/docs/components/image#comp-ref-b-img" class="anchorjs-link" aria-labelledby="comp-ref-b-img" target="_self"></a></span></h3>
<!----> <a data-v-866a22e8="" rel="noopener" target="_blank" href="https://vuejs.org/v2/guide/render-function.html#Functional-Components" class="badge badge-secondary"> 功能组件 </a></div>
<div data-v-866a22e8="" class="text-sm-right col-sm-3"><a data-v-866a22e8="" rel="noopener" target="_blank" href="https://github.com/bootstrap-vue/bootstrap-vue/tree/dev/src/components/image/img.js" class="btn btn-outline-secondary btn-sm"> 查看源代码 </a></div>
</header>
<ul data-v-866a22e8="" class="component-ref-mini-toc my-3">
<!---->
<li data-v-866a22e8=""><a data-v-866a22e8="" href="#comp-ref-b-img-props"><code data-v-866a22e8="" translate="translate" class="notranslate">&lt;b-img&gt;</code> 属性 </a></li>
<!----> <!----> <!----> <!---->
</ul>
<!---->
<article data-v-866a22e8="" class="bd-content">
<h4 data-v-866a22e8="" id="comp-ref-b-img-props" tabindex="-1" class="bv-no-focus-ring mb-3"><span data-v-866a22e8="" class="bd-content-title"> 属性 <a data-v-866a22e8="" href="../../../bootstrap-vue/docs/components/image#comp-ref-b-img-props" class="anchorjs-link" aria-labelledby="comp-ref-b-img-props" target="_self"></a></span></h4>
<div data-v-866a22e8="" class="table-responsive-sm">
<table role="table" aria-busy="false" aria-colcount="4" class="table b-table bv-docs-table table-striped" id="__BVID__1406">
<!----><!---->
<thead role="rowgroup" class="">
<!---->
<tr role="row" class="">
<th role="columnheader" scope="col" tabindex="0" aria-colindex="1" aria-sort="none" class="b-table-sort-icon-left">属性<span class="sr-only"> (Click to sort Ascending)</span></th>
<th role="columnheader" scope="col" tabindex="0" aria-colindex="2" class="">类型</th>
<th role="columnheader" scope="col" tabindex="0" aria-colindex="3" class="">默认值</th>
<th role="columnheader" scope="col" tabindex="0" aria-colindex="4" class="">描述</th>
</tr>
</thead>
<tbody role="rowgroup">
<!---->
<tr role="row" data-pk="src" class="" id="__BVID__1406__row_src">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">src</code> <!----> <!----> <!----> <!----> <!----></td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">设置“src”属性的网址</td>
</tr>
<!----><!---->
<tr role="row" data-pk="srcset" class="" id="__BVID__1406__row_srcset">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">srcset</code> <!----> <span data-v-866a22e8="" class="badge badge-secondary">v2.1.0+</span> <!----> <!----> <!----></td>
<td aria-colindex="2" role="cell" class="">String or Array</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">一个或多个用逗号分隔的字符串（或字符串数组），指示用户代理可以使用的可能图像源</td>
</tr>
<!----><!---->
<tr role="row" data-pk="sizes" class="" id="__BVID__1406__row_sizes">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">sizes</code> <!----> <span data-v-866a22e8="" class="badge badge-secondary">v2.1.0+</span> <!----> <!----> <!----></td>
<td aria-colindex="2" role="cell" class="">String or Array</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">一个或多个用逗号分隔的字符串（或字符串数组），指示一组源大小。 可选与srcset 属性结合使用</td>
</tr>
<!----><!---->
<tr role="row" data-pk="alt" class="" id="__BVID__1406__row_alt">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">alt</code> <!----> <!----> <!----> <!----> <!----></td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">为“alt”属性设置的值</td>
</tr>
<!----><!---->
<tr role="row" data-pk="width" class="" id="__BVID__1406__row_width">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">width</code> <!----> <!----> <!----> <!----> <!----></td>
<td aria-colindex="2" role="cell" class="">Number or String</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">在图片的“width”属性上设置的值</td>
</tr>
<!----><!---->
<tr role="row" data-pk="height" class="" id="__BVID__1406__row_height">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">height</code> <!----> <!----> <!----> <!----> <!----></td>
<td aria-colindex="2" role="cell" class="">Number or String</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">在图片的“height”属性上设置的值</td>
</tr>
<!----><!---->
<tr role="row" data-pk="block" class="" id="__BVID__1406__row_block">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">block</code> <!----> <!----> <!----> <!----> <!----></td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">强制将图像显示为块元素，而不是浏览器默认的inline-block元素</td>
</tr>
<!----><!---->
<tr role="row" data-pk="fluid" class="" id="__BVID__1406__row_fluid">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">fluid</code> <!----> <!----> <!----> <!----> <!----></td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">使图像响应。 图像将根据需要缩小或增大图像的原始宽度</td>
</tr>
<!----><!---->
<tr role="row" data-pk="fluid-grow" class="" id="__BVID__1406__row_fluid-grow">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">fluid-grow</code> <!----> <!----> <!----> <!----> <!----></td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">类似于“fluid”属性，但允许图像放大到其原始宽度以上</td>
</tr>
<!----><!---->
<tr role="row" data-pk="rounded" class="" id="__BVID__1406__row_rounded">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">rounded</code> <!----> <!----> <!----> <!----> <!----></td>
<td aria-colindex="2" role="cell" class="">Boolean or String</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">设置为“true”时，会使图像角稍微变圆。 也可以用于禁用圆角或使图像为圆形/椭圆形。 有关详细信息，请参阅文档</td>
</tr>
<!----><!---->
<tr role="row" data-pk="thumbnail" class="" id="__BVID__1406__row_thumbnail">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">thumbnail</code> <!----> <!----> <!----> <!----> <!----></td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">在图像周围添加缩略图边框</td>
</tr>
<!----><!---->
<tr role="row" data-pk="left" class="" id="__BVID__1406__row_left">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">left</code> <!----> <!----> <!----> <!----> <!----></td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">设置后将图像向左浮动</td>
</tr>
<!----><!---->
<tr role="row" data-pk="right" class="" id="__BVID__1406__row_right">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">right</code> <!----> <!----> <!----> <!----> <!----></td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">设置后将图像向右浮动</td>
</tr>
<!----><!---->
<tr role="row" data-pk="center" class="" id="__BVID__1406__row_center">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">center</code> <!----> <!----> <!----> <!----> <!----></td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">将图像水平居中</td>
</tr>
<!----><!---->
<tr role="row" data-pk="blank" class="" id="__BVID__1406__row_blank">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">blank</code> <!----> <!----> <!----> <!----> <!----></td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">通过SVG数据URI创建空白/透明图像</td>
</tr>
<!----><!---->
<tr role="row" data-pk="blank-color" class="" id="__BVID__1406__row_blank-color">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">blank-color</code> <!----> <!----> <!----> <!----> <!----></td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">'transparent'</code></td>
<td aria-colindex="4" role="cell" class="">将空白图像的颜色设置为指定的CSS颜色值</td>
</tr>
<!----><!----><!----><!---->
</tbody>
<!---->
</table>
</div>
<!----> <!----></article>
<!----> <!----> <!----> <!----></section>
<section data-v-866a22e8="" class="bd-content">
<header data-v-866a22e8="" class="row align-items-center">
<div data-v-866a22e8="" class="col-sm-9">
<h3 data-v-866a22e8="" id="comp-ref-b-img-lazy" tabindex="-1" class="bv-no-focus-ring"><span data-v-866a22e8="" class="bd-content-title"><code data-v-866a22e8="" translate="translate" class="notranslate bigger">&lt;b-img-lazy&gt;</code><a data-v-866a22e8="" href="../../../bootstrap-vue/docs/components/image#comp-ref-b-img-lazy" class="anchorjs-link" aria-labelledby="comp-ref-b-img-lazy" target="_self"></a></span></h3>
<!----> <!----></div>
<div data-v-866a22e8="" class="text-sm-right col-sm-3"><a data-v-866a22e8="" rel="noopener" target="_blank" href="https://github.com/bootstrap-vue/bootstrap-vue/tree/dev/src/components/image/img-lazy.js" class="btn btn-outline-secondary btn-sm"> 查看源代码 </a></div>
</header>
<ul data-v-866a22e8="" class="component-ref-mini-toc my-3">
<!---->
<li data-v-866a22e8=""><a data-v-866a22e8="" href="#comp-ref-b-img-lazy-props"><code data-v-866a22e8="" translate="translate" class="notranslate">&lt;b-img-lazy&gt;</code> 属性 </a></li>
<!----> <!----> <!----> <!---->
</ul>
<!---->
<article data-v-866a22e8="" class="bd-content">
<h4 data-v-866a22e8="" id="comp-ref-b-img-lazy-props" tabindex="-1" class="bv-no-focus-ring mb-3"><span data-v-866a22e8="" class="bd-content-title"> Properties <a data-v-866a22e8="" href="../../../bootstrap-vue/docs/components/image#comp-ref-b-img-lazy-props" class="anchorjs-link" aria-labelledby="comp-ref-b-img-lazy-props" target="_self"></a></span></h4>
<div data-v-866a22e8="" class="table-responsive-sm">
<table role="table" aria-busy="false" aria-colcount="4" class="table b-table bv-docs-table table-striped" id="__BVID__1436">
<!----><!---->
<thead role="rowgroup" class="">
<!---->
<tr role="row" class="">
<th role="columnheader" scope="col" tabindex="0" aria-colindex="1" aria-sort="none" class="b-table-sort-icon-left">属性<span class="sr-only"> (Click to sort Ascending)</span></th>
<th role="columnheader" scope="col" tabindex="0" aria-colindex="2" class="">类型</th>
<th role="columnheader" scope="col" tabindex="0" aria-colindex="3" class="">默认值</th>
<th role="columnheader" scope="col" tabindex="0" aria-colindex="4" class="">描述</th>
</tr>
</thead>
<tbody role="rowgroup">
<!---->
<tr role="row" data-pk="src" class="" id="__BVID__1436__row_src">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">src</code> <span data-v-866a22e8="" class="badge badge-info">Required</span> <!----> <!----> <!----> <!----></td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">设置“src”属性的网址</td>
</tr>
<!----><!---->
<tr role="row" data-pk="srcset" class="" id="__BVID__1436__row_srcset">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">srcset</code> <!----> <span data-v-866a22e8="" class="badge badge-secondary">v2.1.0+</span> <!----> <!----> <!----></td>
<td aria-colindex="2" role="cell" class="">String or Array</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">一个或多个用逗号分隔的字符串（或字符串数组），指示用户代理可以使用的可能图像源</td>
</tr>
<!----><!---->
<tr role="row" data-pk="sizes" class="" id="__BVID__1436__row_sizes">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">sizes</code> <!----> <span data-v-866a22e8="" class="badge badge-secondary">v2.1.0+</span> <!----> <!----> <!----></td>
<td aria-colindex="2" role="cell" class="">String or Array</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">一个或多个用逗号分隔的字符串（或字符串数组），指示一组源大小。 可选与srcset 属性结合使用</td>
</tr>
<!----><!---->
<tr role="row" data-pk="alt" class="" id="__BVID__1436__row_alt">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">alt</code> <!----> <!----> <!----> <!----> <!----></td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">为“alt”属性设置的值</td>
</tr>
<!----><!---->
<tr role="row" data-pk="width" class="" id="__BVID__1436__row_width">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">width</code> <!----> <!----> <!----> <!----> <!----></td>
<td aria-colindex="2" role="cell" class="">Number or String</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">在图片的“width”属性上设置的值</td>
</tr>
<!----><!---->
<tr role="row" data-pk="height" class="" id="__BVID__1436__row_height">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">height</code> <!----> <!----> <!----> <!----> <!----></td>
<td aria-colindex="2" role="cell" class="">Number or String</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">在图片的“height”属性上设置的值</td>
</tr>
<!----><!---->
<tr role="row" data-pk="blank-src" class="" id="__BVID__1436__row_blank-src">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">blank-src</code> <!----> <!----> <!----> <!----> <!----></td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">占位符图像而不是空白图像</td>
</tr>
<!----><!---->
<tr role="row" data-pk="blank-color" class="" id="__BVID__1436__row_blank-color">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">blank-color</code> <!----> <!----> <!----> <!----> <!----></td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">'transparent'</code></td>
<td aria-colindex="4" role="cell" class="">将空白占位符图像的颜色设置为指定的CSS颜色值</td>
</tr>
<!----><!---->
<tr role="row" data-pk="blank-width" class="" id="__BVID__1436__row_blank-width">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">blank-width</code> <!----> <!----> <!----> <!----> <!----></td>
<td aria-colindex="2" role="cell" class="">Number or String</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">在占位符图像的'width'属性上设置的值。默认为'width'属性的值</td>
</tr>
<!----><!---->
<tr role="row" data-pk="blank-height" class="" id="__BVID__1436__row_blank-height">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">blank-height</code> <!----> <!----> <!----> <!----> <!----></td>
<td aria-colindex="2" role="cell" class="">Number or String</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">在占位符图像的“高度”属性上设置的值。默认为'height'属性的值</td>
</tr>
<!----><!---->
<tr role="row" data-pk="show" class="" id="__BVID__1436__row_show">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">show</code> <!----> <!----> <!----> <!----> <!----></td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">如果设置为 true，将强制显示通过“src”道具指定的图像</td>
</tr>
<!----><!---->
<tr role="row" data-pk="fluid" class="" id="__BVID__1436__row_fluid">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">fluid</code> <!----> <!----> <!----> <!----> <!----></td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">使图像响应。 图像将根据需要缩小或增大图像的原始宽度</td>
</tr>
<!----><!---->
<tr role="row" data-pk="fluid-grow" class="" id="__BVID__1436__row_fluid-grow">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">fluid-grow</code> <!----> <!----> <!----> <!----> <!----></td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">类似于“fluid”属性，但允许图像放大到其原始宽度以上</td>
</tr>
<!----><!---->
<tr role="row" data-pk="block" class="" id="__BVID__1436__row_block">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">block</code> <!----> <!----> <!----> <!----> <!----></td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">强制将图像显示为块元素，而不是浏览器默认的inline-block元素</td>
</tr>
<!----><!---->
<tr role="row" data-pk="thumbnail" class="" id="__BVID__1436__row_thumbnail">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">thumbnail</code> <!----> <!----> <!----> <!----> <!----></td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">在图像周围添加缩略图边框</td>
</tr>
<!----><!---->
<tr role="row" data-pk="rounded" class="" id="__BVID__1436__row_rounded">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">rounded</code> <!----> <!----> <!----> <!----> <!----></td>
<td aria-colindex="2" role="cell" class="">Boolean or String</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">设置为“true”时，会使图像角稍微变圆。也可以用于禁用圆角或使图像为圆形/椭圆形。 有关详细信息，请参阅文档</td>
</tr>
<!----><!---->
<tr role="row" data-pk="left" class="" id="__BVID__1436__row_left">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">left</code> <!----> <!----> <!----> <!----> <!----></td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">设置后将图像向左浮动</td>
</tr>
<!----><!---->
<tr role="row" data-pk="right" class="" id="__BVID__1436__row_right">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">right</code> <!----> <!----> <!----> <!----> <!----></td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">设置后将图像向右浮动</td>
</tr>
<!----><!---->
<tr role="row" data-pk="center" class="" id="__BVID__1436__row_center">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">center</code> <!----> <!----> <!----> <!----> <!----></td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">将图像水平居中</td>
</tr>
<!----><!---->
<tr role="row" data-pk="offset" class="" id="__BVID__1436__row_offset">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">offset</code> <!----> <!----> <!----> <!----> <!----></td>
<td aria-colindex="2" role="cell" class="">Number or String</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">360</code></td>
<td aria-colindex="4" role="cell" class="">加载惰性图像之前，距视口边缘的像素数</td>
</tr>
<!----><!----><!----><!---->
</tbody>
<!---->
</table>
</div>
<!----> <!----></article>


<article class="bd-content">
<h3 id="importing-individual-components" tabindex="-1" class="bv-no-focus-ring"><span class="bd-content-title"> 导入单个组件 <a href="../../../bootstrap-vue/docs/components/image#importing-individual-components" class="anchorjs-link" aria-labelledby="importing-individual-components" target="_self"></a></span></h3>
<p> 您可以通过以下命名的导出将单个组件导入到项目中： </p>
<div class="table-responsive-sm">
<table role="table" aria-busy="false" aria-colcount="3" class="table b-table bv-docs-table table-striped" id="__BVID__1467">
<!----><!---->
<thead role="rowgroup" class="thead-default">
<!---->
<tr role="row" class="">
<th role="columnheader" scope="col" aria-colindex="1" class="">组件</th>
<th role="columnheader" scope="col" aria-colindex="2" class="">命名输出</th>
<th role="columnheader" scope="col" aria-colindex="3" class="">导入路径</th>
</tr>
</thead>
<tbody role="rowgroup">
<!---->
<tr role="row" class="">
<td aria-colindex="1" role="cell" class=""><code translate="translate" class="text-nowrap notranslate">&lt;b-img&gt;</code></td>
<td aria-colindex="2" role="cell" class=""><code translate="translate" class="text-nowrap notranslate">BImg</code></td>
<td aria-colindex="3" role="cell" class=""><code translate="translate" class="text-nowrap notranslate">bootstrap-vue</code></td>
</tr>
<tr role="row" class="">
<td aria-colindex="1" role="cell" class=""><code translate="translate" class="text-nowrap notranslate">&lt;b-img-lazy&gt;</code></td>
<td aria-colindex="2" role="cell" class=""><code translate="translate" class="text-nowrap notranslate">BImgLazy</code></td>
<td aria-colindex="3" role="cell" class=""><code translate="translate" class="text-nowrap notranslate">bootstrap-vue</code></td>
</tr>
<!----><!---->
</tbody>
<!---->
</table>
</div>
<p><strong>示例：</strong></p>
<figure class="highlight"><pre translate="translate" class="hljs language-js text-monospace p-2 notranslate javascript"><span class="hljs-keyword">import</span> { BImg } <span class="hljs-keyword">from</span> <span class="hljs-string">'bootstrap-vue'</span>
Vue.component(<span class="hljs-string">'b-img'</span>, BImg)</pre></figure>
</article>
<!---->
<article class="bd-content">
<h3 id="importing-as-a-plugin" tabindex="-1" class="bv-no-focus-ring"><span class="bd-content-title"> 导入为Vue.js插件 <a href="../../../bootstrap-vue/docs/components/image#importing-as-a-plugin" class="anchorjs-link" aria-labelledby="importing-as-a-plugin" target="_self"></a></span></h3>
<p> 该插件包括上面列出的所有单个组件。插件还包括任何组件别名。 </p>
<div class="table-responsive-sm">
<table fileds="namedExport,importPath" role="table" aria-busy="false" aria-colcount="2" class="table b-table bv-docs-table table-striped b-table-caption-top" id="__BVID__1478">
<!----><!---->
<thead role="rowgroup" class="thead-default">
<!---->
<tr role="row" class="">
<th role="columnheader" scope="col" aria-colindex="1" class="">命名输出</th>
<th role="columnheader" scope="col" aria-colindex="2" class="">导入路径</th>
</tr>
</thead>
<tbody role="rowgroup">
<!---->
<tr role="row" class="">
<td aria-colindex="1" role="cell" class=""><code translate="translate" class="text-nowrap notranslate">ImagePlugin</code></td>
<td aria-colindex="2" role="cell" class=""><code translate="translate" class="text-nowrap notranslate">bootstrap-vue</code></td>
</tr>
<!----><!---->
</tbody>
<!---->
</table>
</div>
<!---->
<p><strong>示例：</strong></p>
<figure class="highlight"><pre translate="translate" class="hljs language-js text-monospace p-2 notranslate javascript"><span class="hljs-keyword">import</span> { ImagePlugin } <span class="hljs-keyword">from</span> <span class="hljs-string">'bootstrap-vue'</span>
Vue.use(ImagePlugin)</pre></figure>
</article>







</main>
</div>
</div>


<script src="../../../v4/assets/js/vendor/jquery-slim.min.js"></script>
<script src="../../../v4/dist/js/popper.min.js"></script> 
<script src="../../../v4/dist/js/bootstrap.min.js"></script> 
<script src="../../../v4/assets/js/docs.min.js"></script> 
<script src="../../../v4/assets/js/ie-emulation-modes-warning.js"></script> 
<script src="../../../v4/assets/js/docsearch.min.js"></script> 
<script>
  docsearch({
    appId: 'PRR89ISST8',
    apiKey: '95044d57d4d7bb744f322d1f18ed607f',
    indexName: 'z01-bootstrapV4',
    inputSelector: '#search-input',
    handleSelected: function (input, event, suggestion) {
      var url = suggestion.url;
      url = suggestion.isLvl1 ? url.split('#')[0]: url;
      // If it's a title we remove the anchor so it does not jump.
      window.location.href = url;
    },
    transformData: function (hits) {
      return hits.map(function (hit) {
        hit.url = hit.url.replace('https://v4-alpha.getbootstrap.com', '/docs/4.0');
        return hit;
      });
    },
    debug: false // Set debug to true if you want to inspect the dropdown
  });
</script> 
<script>
  Holder.addTheme('gray', {
    bg: '#777',
    fg: 'rgba(255,255,255,.75)',
    font: 'Helvetica',
    fontweight: 'normal'
  });
</script>
</body>
</html>
